<template>
  <div style="height:100% ">
    <div class="top-box">
      <div class="top">
        <div class="head"><!-- 头部左边 -->
          <h1>新冠肺炎流调系统</h1>
          <span class="iconfont tou">&#xe60c</span>
        </div>
        <div class="wei"><!-- 头部右边 -->
          <span class="zi">{{ qu }}</span> <!-- 相城区流调疾控中心 变化数据-->
          <div class="notice">
            <span class="iconfont la">&#xe601</span><!-- 喇叭图片 -->
            <span class="guan">关于规范核酸检测工作的通知</span> <!-- 跳转公告 -->
          </div>


          <div class="tou1"> <!-- 头部最右侧 -->
            <router-link to="mescenter"><span class="iconfont ling">&#xe600</span></router-link><!-- 铃铛图片 -->
            <!-- <img src="" alt="">铃铛 -->
            <div class="tou2">
              <img class="img" @mouseenter="dtou" :src="imgSrc" /><!-- 头像 -->
              <div id="fu" v-show="myshow" @mouseleave="none"><!-- 头像hover效果 -->
                <router-link to="/zhanghaoshezhi" v-if="qu != '苏州市疾控中心'">
                  <span>账号设置</span>
                </router-link>
                <span @click="exitLogin">退出登录</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="nav-bar clearfix">
      <div class="bottom-box">
        <div class="bottom">
          <mynav /> <!-- 导航栏 -->
        </div>
      </div>
      <div class="right">
        <router-view :key="route.fullPath"></router-view><!-- 路由内容 -->
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onBeforeMount } from 'vue';
import mynav from '../nav.vue'
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

import axios from '@/util/http'

export default defineComponent({
  name: "Home",
  setup() {
    const router = useRouter()
    const route = useRoute()
    const qu = ref('')
    const state = reactive({
      myshow: false
    })

    const store = useStore()
    // 显示、隐藏
    const dtou = () => {
      state.myshow = true

    }
    const none = () => {
      state.myshow = false
    }



    // 退出登录
    const exitLogin = () => {
      // 清空localStorage
      localStorage.removeItem('token')
      localStorage.removeItem('userAuthority')
      localStorage.removeItem('userName')
      localStorage.removeItem('role')
      localStorage.removeItem('headPortrait')
      localStorage.removeItem('area')
      localStorage.removeItem('authority')
      router.push('/')
    }

    let imgSrc = ref()

    onBeforeMount(() => {
      if (localStorage.getItem('userAuthority') == 'city') {
        qu.value = '苏州市疾控中心'
      } else {
        if (localStorage.getItem('area') != '') {
          qu.value = `${localStorage.getItem('area')}流调疾控中心`
        }

      }

      //挂载账号头像
      if (localStorage.getItem('headPortrait') != '') {
        imgSrc.value = localStorage.getItem('headPortrait');
      }
    })

    return {
      router,
      qu,
      dtou,
      none,
      ...toRefs(state),
      imgSrc,
      exitLogin,
      route
    }

  },
  components: {
    mynav
  }
})
</script>

<style scoped lang="less">
.displayCenter {
  display: flex;
  align-items: center;
}

.top-box {
  width: 100%;
  height: 60px;
}

.top {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 60px;
  display: flex;
  flex: 2
}

.nav-bar {
  width: 100%;
  height: calc(100% - 60px);
  position: relative;

}

.bottom-box {
  width: 220px;
  height: 100%;
}

.bottom {
  width: 220px;
  height: 100%;
  position: fixed;
  /* border: 1px solid red; */
}

.head {
  width: 220px;
  background-color: #2c72e7;
  display: flex;
  line-height: 55px;


}

.wei {
  width: calc(100% - 220px);
  background-color: #307dff;
  // position: relative;
  .displayCenter();
  justify-content: space-between
}

/* 路由器内容 */
.right {
  position: absolute;
  width: calc(100% - 220px);
  top: 0px;
  left: 220px;
  box-sizing: border-box;
  width: calc(100% - 220px);
  padding-top: 14px;
  padding-left: 50px;
  padding-right: 50px;
  height: 100%;
  background-color: #f5f5f5;
  z-index: 2;
  overflow: auto;
  /* 溢出滚动 */
  overflow: auto;
}

h1 {
  color: #dfe9fb;
  padding-left: 22px;
  font-size: 20px
}

.tou {
  padding-left: 5px;
  color: #dfe9fb;
}

/* 设置头部变化数据字体的 */
.zi {
  width: 15%;
  font-size: 13px;
  // position: absolute;
  // top: 20px;
  // left: 40px;
  color: #FFFFFF;
  text-align: center;
}

/* 关于规范核酸检测工作的通知 */
.notice {
  width: 30%;
  height: 100%;
  .displayCenter();
}

.guan {
  font-size: 13px;
  color: #FFFFFF;
  // position: absolute;
  // top: 20px;
  // left: 240px;
}

.guan:hover {
  cursor: pointer
}

/* 喇叭设置 */
.la {
  // position: absolute;
  // top: 18.5px;
  // left: 215px;
  width: 8%;
  height: 100%;
  color: #FFFFFF;
  text-align: center;
  .displayCenter();

}

/* 铃铛设置 */
.ling {
  // position: absolute;
  // top: 18.5px;
  // right: 100px;
  color: #FFFFFF;
  font-size: 20px;
}

.ling:hover {
  cursor: pointer;
}

/* 最右侧 */
.tou1 {
  // position: absolute;
  // top: 18.5px;
  // right: 70px;
  width: 40%;
  color: #FFFFFF;
  font-size: 20px;
  .displayCenter();
  justify-content: flex-end
}

.tou2 {
  width: 20%;
  height: 40px;
  font-size: 13px;
  .displayCenter();
  position: relative;
  // position: absolute;
  // top: 4px;
  // cursor: default
}

.img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 20%;
}


#fu {
  color: black;
  background-color: white;
  position: absolute;
  top: 50px;
  right: 20px;
  z-index: 3;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  cursor: pointer;

  span,
  a {
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
  }

  span:hover,
  a:hover {
    background: #d7d7d7;
  }
}

#fu h3 {
  line-height: 20px;
  margin-left: 12px
}
</style>